<template>
  <div class="text-light-50 px-5px py-1px box-border rounded" :class="typeStyle">{{ type }}</div>
</template>

<script setup lang="ts">
interface Props {
  type?: "notice" | "bug" | "demand"
}

const typeClass = {
  notice: "bg-green-600",
  demand: "bg-blue-600",
  bug: "bg-red-600"
}

const rawProps = withDefaults(defineProps<Props>(), {
  type: "notice"
})
const {type} = toRefs(rawProps)

const typeStyle = computed(() => {
  return typeClass[type.value]
})
</script>

<style scoped>

</style>